<template>
  <el-button-group
    class="box-top-select"
    :style="{ border: borderShow ? `1px solid ${borderColor}` : '' }">
    <el-button
      v-for="item in btnInfos"
      :key="item.value"
      :color="selectBtn == item.value ? item.isActiveColor : item.activeColor"
      :style="{
        borderColor: item.isActiveColor
      }"
      :size="size"
      @click="selectBtnClick(item.value)">
      {{ item.label }}
    </el-button>
  </el-button-group>
</template>

<script setup lang="ts">
import { PropType, computed } from 'vue'
import type { BtnGroups } from '@/api/home/type'
const props = defineProps({
  type: {
    type: String,
    default: ''
  },
  btnInfos: {
    type: Array as PropType<BtnGroups[]>,
    default: () => []
  },
  size: {
    type: String as PropType<'small' | 'default' | 'large'>,
    default: 'default'
  },
  borderShow: {
    type: Boolean,
    default: false
  },
  borderColor: {
    type: String,
    default: '#1886F8'
  }
})
const emits = defineEmits(['update'])
const selectBtn = computed(() => props.type)
const selectBtnClick = (value: string | number) => {
  if (value !== props.type) {
    emits('update', value)
  }
}
</script>

<style scoped lang="scss">
.box-top-select {
  border-radius: 4px;
  :deep(.el-button) {
    margin-left: 0;
    padding: 0 15px;
    border-radius: 0;
    border-right-width: 0px;

    &:nth-child(1) {
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    &:last-child {
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
      border-right-width: 1px;
    }
  }
}
</style>
